import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue')
  },
  {
    path: '/commonTable',
    name: 'commonTable',
    component: () => import('@/components/CommonTable')
  },
  {
    path: '/tag',
    name: 'tag',
    component: () => import('@/components/Tag')
  },
  {
    path: '/form',
    name: 'form',
    component: () => import('@/components/Form')
  },
  {
    path: '/scss',
    name: 'scss',
    component: () => import('@/components/Scss')
  },
  {
    path: '/changeSelectKey',
    name: 'changeSelectKey',
    component: () => import('@/components/ChangeSelectKey')
  },
  {
    path: '/datePickerEcho',
    name: 'datePickerEcho',
    component: () => import('@/components/DatePickerEcho')
  },
  {
    path: '/changeSelectValueFormRequire',
    name: 'changeSelectValueFormRequire',
    component: () => import('@/components/ChangeSelectValueFormRequire')
  },

  {
    path: '/tableSwitch',
    name: 'tableSwitch',
    component: () => import('@/components/TableSwitch')
  },
  {
    path: '/arraryFromString',
    name: 'arraryFromString',
    component: () => import('@/components/ArraryFromString')
  },
  {
    path: '/dataConver',
    name: 'dataConver',
    component: () => import('@/components/dataConver')
  },
  {
    // 自定义指令
    path: '/directive',
    name: 'directive',
    component: () => import('@/components/Directive')
  },
  {
    path: '/arrayMethods',
    name: 'arrayMethods',
    component: () => import('@/components/ArrayMethods')
  },
  {
    path: '/changeCascaderData',
    name: 'changeCascaderData',
    component: () => import('@/components/ChangeCascaderData')
  },
  {
    // 文件上传
    path: '/fileUpload',
    name: 'fileUpload',
    component: () => import('@/components/FileUpload')
  },
  {
    path: '/search',
    name: 'search',
    component: () => import('@/components/search')
  },
  {
    // 执行年限的自然计算
    path: '/CalculationYear',
    name: 'CalculationYear',
    component: () => import('@/components/CalculationYear')
  },
  {
    path: '/upload',
    name: 'Upload',
    component: () => import('@/components/upload')
  },
  {
    path: '/watchArray',
    name: 'WatchArray',
    component: () => import('@/components/WatchArray')
  },
  {
    path: '/selectDialog',
    name: 'SelectDialog',
    component: () => import('@/components/selectDialog/index.vue')
  },
  {
    path: '/expand',
    name: 'Expand',
    component: () => import('@/components/Expand')
  },
  {
    path: '/idsame',
    name: 'Idsame',
    component: () => import('@/components/IdSame')
  },
  {
    path: '/backTab',
    name: 'BackTab',
    component: () => import('@/components/BackTab/index.vue')
  },
  {
    path: '/tableDisabled',
    name: 'TableDisabled',
    component: () => import('@/components/TableDisabled')
  },
  {
    path: '/tableAndDialog',
    name: 'TableAndDialog',
    component: () => import('@/components/TableAndDialog/index.vue')
  },
  {
    path: '/formControl',
    name: 'FormControl',
    component: () => import('@/components/FormControl')
  },
  {
    path: '/uploadImage',
    name: 'uploadImage',
    component: () => import('@/components/uploadImage')
  },
  {
    path: '/checkbox',
    name: 'checkbox',
    component: () => import('@/components/checkbox/index.vue')
  }, {
    path: '/checkbox/edit',
    name: 'edit',
    component: () => import('@/components/checkbox/detail.vue')
  },
  {
    path: '/permission',
    name: 'Permission',
    component: () => import('@/components/Permission')
  },
  {
    path: '/selectCheckbox',
    name: 'selectCheckbox',
    component: () => import('@/components/SelectCheckbox/SelectCheckbox.vue')
  },
  {
    path: '/tableShelves',
    name: 'tableShelves',
    component: () => import('@/components/TableShelves')
  },
  {
    path: '/moreText',
    name: 'moreText',
    component: () => import('@/components/MoreText')
  },
  {
    path: '/jquery',
    name: 'jquery',
    component: () => import('@/components/Jquery')
  },
  {
    path: '/copyText',
    name: 'copyText',
    component: () => import('@/components/CopyText')
  },
  // uploadFile
  {
    path: '/uploadFile',
    name: 'uploadFile',
    component: () => import('@/components/uploadFile')
  },
  {
    path: '/cascaderDataChange',
    name: 'cascaderDataChange',
    component: () => import('@/components/cascaderDataChange')
  },
  {
    path: '/vModel',
    name: 'vModel',
    component: () => import('@/components/vModel')
  },
  {
    path: '/tableList',
    name: 'tableList',
    component: () => import('@/components/tableList')
  },
  // 动态组件
  {
    path: '/changeComponent',
    name: 'changeComponent',
    component: () => import('@/components/changeComponent')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
